<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付宝测试</title>
    <link rel="icon" href="img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<style>
    #payDv{
        position: relative;
        width: 800px;
        height: 550px;
        background-color: rgba(0,0,0,0.1);
        margin: 150px auto 0;
    }

    .paySize{
        width: 200px;
        height: 150px;
        border: 2px solid black;
        float: left;
        margin: 60px 5px 0 45px;
        cursor: pointer;
        text-align: center;
        font-size: 2em;
        color: black;
    }

    #nextPayDv{
        width: 150px;
        height: 40px;
        margin: 20px auto 0;
    }

    #nextPay{
        width: 150px;
        height: 40px;
        background-color: #4ab9e6;
        font-size: 1.5em;
        color: white;
    }

    #nextPay:hover{
        background-color: #7ac8e7;
    }

    #choicePayWayDv{
        position: absolute;
        width: 500px;
        height: 400px;
        top: 20px;
    }

    #PayTitleDv{
        color: #009f95;
        width: 500px;
        height: 70px;
        margin: 0 auto;
        text-align:center;
        font-size: 2.7em;
        font-style: italic
    }

    #PayMoneyDv{
        width: 500px;
        height: 50px;
        margin: 50px auto 0;
        text-align:center;
    }

    .payImageDv{
        float: left;
        margin: 60px 30px 0 55px;
    }

    .payImage{
        width: 75px;
        height: 75px;
        cursor: pointer;
    }
</style>
<body>
<div id="payDv">
    <div id="paySizeDv" style="width: 800px;height: 450px;">
        <div class="paySize" value="6">6</div>
        <div class="paySize" value="30">30</div>
        <div class="paySize" value="68">68</div>
        <div class="paySize" value="128">128</div>
        <div class="paySize" value="328">328</div>
        <div class="paySize" value="648">648</div>
    </div>
    <div id="nextPayDv">
        <button id="nextPay" onclick="nextPay()">下一步</button>
    </div>

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var PaySize=0;


    $('#payDv').on("click",".paySize",function(){
        $('.paySize').css('border','2px solid black').css('color','black')
        $(this).css('border','2px solid red').css('color','red')
        PaySize=$(this).attr('value')
    })


    function nextPay() {
        if (PaySize===0){
            layer.msg('请选择充值档位',{time:1000})
        }
        else {
            $('#payDv').css('width','500px').css('height','400px').css('margin','250px auto 0')
            let payDv=document.getElementById('payDv')
            $('#payDv').empty();
            let NewPayDv='<div id="choicePayWayDv">' +
                '<div id="iPosition" style="float: left;position:absolute;color: black;margin:10px 0 0 20px">' +
                '<i id="i" class="layui-icon layui-icon-return" style="font-size: 3em"></i></div>' +
                '<div id="PayTitleDv"><b>支付</b></div>' +
                '<div id="PayMoneyDv"></div>'+
                '<div id="zfb" class="payImageDv"><img src="img/支付宝支付.png" class="payImage"></div>' +
                '<div id="wx" class="payImageDv"><img src="img/微信支付.png" class="payImage"></div>' +
                '<div id="yl" class="payImageDv"><img src="img/银联支付.png" class="payImage"></div>'
            payDv.innerHTML=NewPayDv
            let PayMoney=document.getElementById('PayMoneyDv');
            PayMoney.innerHTML='<div style="float: left;font-size: 1.2em;color: #8D8D8D;margin-left: 50px"><b>商品：</b><b>'+PaySize+'0钻石</b></div>' +
                '<div style="float: right;color: #f65e5e;font-size: 2.5em;margin:-15px 40px 0 0"><b>￥</b><b id="PayMoney">'+PaySize+'</b><b style="font-size: 0.5em">元</b></div>'
        }
    }


    $('#payDv').on("click","#zfb",function(){
        payDiamond(PaySize)
    })
    $('#payDv').on("click","#wx",function(){
        layer.msg('十分抱歉，暂未与微信合作，无法微信支付')
    })

    $('#payDv').on("click","#yl",function(){
        layer.msg('十分抱歉，暂未与各大银行合作，无法银联支付')
    })

    $('#payDv').on("click","#i",function(){
        $('#payDv').empty();
        let payDv=document.getElementById('payDv')
        $('#payDv').css('width','800px').css('height','550px').css('margin','150px auto 0')
        let OidPayDv='<div id="paySizeDv" style="width: 800px;height: 450px;">\n' +
            '        <div class="paySize" value="6">6</div>\n' +
            '        <div class="paySize" value="30">30</div>\n' +
            '        <div class="paySize" value="68">68</div>\n' +
            '        <div class="paySize" value="128">128</div>\n' +
            '        <div class="paySize" value="328">328</div>\n' +
            '        <div class="paySize" value="648">648</div>\n' +
            '    </div>\n' +
            '    <div id="nextPayDv">\n' +
            '        <button id="nextPay" onclick="nextPay()">下一步</button>\n' +
            '    </div>'
        payDv.innerHTML=OidPayDv
    })



    function payDiamond(number) {
        let amount=number
        $.ajax({
            url: '/payment/pay',
            method: 'POST',
            contentType: 'application/json',
            data:JSON.stringify({
                userId:1,
                amount:amount
            }),
            success:function (res) {
                layer.msg('正在跳转到支付页面······'+res.data)
            }
        })
    }

</script>
</html>